<template>
<div :style="{ height: tableHeight + 'px', background: '#ffffff'}">
 <ContentWrap>
    <div class="routeHeader">
      <el-button class="mr-5px" @click="submitForm" type="primary" :disabled="formLoading"
        >保 存</el-button
      >
      <el-button @click="goBack">关 闭</el-button>
    </div>
  </ContentWrap>
<ContentWrap>
    <div class="selectForm">
      <div class="title">基本信息</div>
      <div>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      v-loading="formLoading"
      class="tableBox"
    >
      <el-form-item label="任务号" prop="spotCheckTaskNumber">
        <el-input v-model="formData.spotCheckTaskNumber" disabled/>
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="formData.deviceName"  disabled/>
      </el-form-item>
      <el-form-item label="设备类型" prop="dictDeviceType">
        <el-input v-model="formData.dictDeviceType"  disabled />
      </el-form-item>
      <el-form-item label="负责人" prop="configOrgStaffArchivesName">
        <el-input v-model="formData.configOrgStaffArchivesName" disabled/>
      </el-form-item>
      <el-form-item label="点检时间" prop="spotCheckTime">
        <el-input v-model="formData.spotCheckTime" disabled/>
      </el-form-item>
    </el-form>
  </div>
    </div>
</ContentWrap>
<ContentWrap>
    <div class="title">点检项目</div>
   <el-table
    ref="multipleTableRef" 
    :data="list" 
    border 
    >
      <el-table-column label="点检项目编号" align="left" header-align="left" prop="spotCheckProjectNumber" />
      <el-table-column label="点检项目名称" align="left" header-align="left" prop="spotCheckProjectName" />
      <el-table-column label="判断基准" align="left" header-align="left" prop="criterion" />
      <el-table-column label="部位" align="left" header-align="left" prop="part" />
      <el-table-column label="实施时间" align="left" header-align="left" prop="createTime" :formatter="dateFormatter"/>
      <el-table-column label="点检方式" align="left" header-align="left" prop="spotCheckMethod"/>
      <el-table-column label="实施周期" align="left" header-align="left" prop="dictImplementationCycle">
      <template #default="scope">
        <byte-tag
          className="test"
          :type="DICT_TYPE.DICT_IMPLEMENTATION_CYCLE"
          :value="scope.row.dictImplementationCycle"
        />
      </template>
      </el-table-column>
      <el-table-column label="填写类型" align="center" prop="dictFillingType">
        <template #default="scope">
        <byte-tag
          className="test"
          :type="DICT_TYPE.DICT_FILLING_TYPE"
          :value="scope.row.dictFillingType"
        />
      </template>
        </el-table-column>
      <el-table-column label="点检结果" align="center" prop="checkResult">
        <template #default="scope">
          <el-input v-nextInput="'checkResult'"  name="checkResult" v-model="list[scope.$index].checkResult" v-if="scope.row.dictFillingType==20" @input="selectChange($event,scope)" />
          <el-select
          v-model="list[scope.$index].checkResult"
          clearable
          v-else
          :fit-input-width="true"
          @change="selectChange($event,scope)"
          >
            <el-option
            v-for="(item,index) in checkArr"
            :key="index"
            :label="item"
            :value="item"
          />
       </el-select>
        </template>
        </el-table-column>
      <el-table-column label="问题描述" align="center" prop="problemDescription">
      <template #default="scope">
      <el-input v-nextInput="'problemDescription'"  name="problemDescription" v-model="list[scope.$index].problemDescription"  @input="selectChange($event,scope)"/>
    </template>
    </el-table-column>
    </el-table>
</ContentWrap>
</div>
</template>

<script setup>
import { DICT_TYPE } from '@/utils/dict'
import * as DeviceMaintenanceTaskApi from '@/api/produce/deviceManagement/deviceMaintenanceTask'
import { useTagsViewStore } from '@/store/modules/tagsView'
import ByteTag from './ByteTag.vue'
import { dateFormatter } from '@/utils/formatTime'
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const tableHeight = ref(0)
const formData = ref({
  id: undefined,
  spotCheckTaskNumber: undefined,
  configOrgStaffArchivesName: undefined,
  deviceName: undefined,
  spotCheckTime: undefined,
  dictDeviceType: undefined,
})
const list =ref([])
const formRef = ref() // 表单 Ref
const { query } = useRoute() // 路由的查询

//提交修改的的数据
const submitData = ref({
  id:Number(query.id),
  deviceCheckTaskUpdateReqVOList:[]
})

//存放修改的数据
const changeList = submitData.value.deviceCheckTaskUpdateReqVOList
//输入框改变时，向所在id数据中加入修改的数据
const selectChange = (event,scope)=>{
  changeList[scope.$index]={
      id:scope.row.id,
      checkResult:list.value[scope.$index].checkResult,
      problemDescription:list.value[scope.$index].problemDescription
    }
    console.log('changeList',changeList)
}

/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    console.log('submitData',submitData.value)
    if (query.type === 'update') {
      await DeviceMaintenanceTaskApi.updateDeviceMaintenanceTask(submitData.value)
      message.success(t('common.updateSuccess'))
    }
    goBack()
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    spotCheckTaskNumber: undefined,
    personInCharge: undefined,
    deviceCode: undefined,
    deviceName: undefined,
    spotCheckTime: undefined,
    dictDeviceType: undefined,
    dictMaintenanceStatus: undefined
  }
  formRef.value?.resetFields()
}
/**返回 */
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async() => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path:'/produce/produce/deviceManagement/device-maintenance-task'
  })
}

const temp =ref([])// 临时数组，存放接口返回的枚举值
let checkArr =ref([])// 用于渲染枚举的数组

/** 初始化 */
onMounted(async () => {
  formLoading.value = true
  tableHeight.value = document.body.clientHeight - 130
  await resetForm()
  if (query.id) {
    formData.value = await DeviceMaintenanceTaskApi.getDeviceMaintenanceTask(query.id) 
    temp.value = await DeviceMaintenanceTaskApi.getDeviceCheckTask(query.id)
    await temp.value.forEach((item,index)=>{
      // 如果类型为枚举
      if(item.dictFillingType==10){
        checkArr.value=item.enumeratedValues.split(",")  
        temp.value[index].enumeratedValues=undefined
      }
    })
    list.value = temp.value
  formLoading.value = false
}
})


</script>
<style scoped lang="scss">
// .selectForm{
//   display: flex;
//   border: 1px solid #ebeef5;
//   margin-top: 10px;
//   margin-bottom: 20px;
//   flex-direction: column;
// }
.tableBox{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>